<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gallery</title>
    <link rel="stylesheet" href="style.css">
    <script src="./history/data3.js"></script>
</head>
<body style="overflow-y: scroll">
    <main id="root">
        <header>
            <h1>Gallery</h1>
            <p>
                WIDTH {{ww}}
                &nbsp;
                &nbsp;
                HIGHT 
                <input type="number" v-model="h" @input="init" style="width: 60px;">
                &nbsp;
                &nbsp;
                GAP 
                <input type="number" v-model="gap" @input="init" style="width: 60px;">
            </p>
        </header>
        <section>
            <article class="box" id="box" :style="{
                marginRight: `-${+gap+5}px`
            }">
                <figure 
                    v-for="item in list" 
                    :key="item.id"
                    :class="{'contain': item._widthType}"
                    :style="{
                        width: item._width + 'px',
                        height: item._height + 'px',
                        marginRight: gap + 'px',
                        marginBottom: gap + 'px',
                    }">
                    <img 
                        v-if="item.equalh_url" 
                        :src="'http:'+ item.equalh_url"
                    >
                </figure>
            </article>
        </section>
    </main>
    <script crossorigin="anonymous" integrity="sha512-h3aCJRk6tEHugDYUidF7GqixhzgeXSiSdq5U+5oLIJtIncSQq6eev48qqYfuTdrsH5Q1eO4IAmyJGDwzRaWNNQ==" src="https://lib.baomitu.com/vue/2.6.12/vue.common.dev.js"></script>
    <script src="index.js"></script>
    <script>
    new Vue({
        data: {
            rlist: data.list,
            list: [],
            ww: 0,
            gap: 5,
            h: 280
        },
        mounted: function() {
            window.addEventListener('resize', this.init.bind(this));
            this.init();
        },
        methods: {
            init: function () {
                this.ww = document.getElementById('box').clientWidth;

                this.list = Gallery({
                    list: this.rlist, 
                    waperWidth: this.ww, 
                    rowHeight: +this.h, 
                    gap: this.gap,
                    maxWidth: 400,
                    minWidth: 200,
                    threshold: 30,
                    hideLast: true,
                });
            }
        }
    }).$mount('#root');
    </script>
</body>
</html>
